<template>
	<view>
		<view class="top_box">
			<view class="top_title">
				选择标签
			</view>
			<view class="x" @click="closeMark">
				<u-icon name="close" size="40rpx" color="#999999"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: 75vh;margin-top: 80rpx" @scrolltolower="scrolltolower"> 
			<view class="mark_zoom">
				<view class="mark_zoom_box" v-for="m,k in list" :key="m.id">
					<view class="mark_zoom_title">
						{{m.name}}
					</view>
					<view class="mark_zoom_item">
						<view class="disease" :class="{'checked':n.check}" @click="selectMarked(k,key)"
							v-for="n,key in m.tagList">
							{{cultString(n.tagName)}}
						</view>
					</view>
				</view>
			</view>
			<empty-team text="暂无标签" v-if="empty"></empty-team>
			<view style="padding-bottom: 400rpx;">
				<u-loadmore :status="status" v-if="!empty" />
			</view>
			<view class="sticky">
				<view class="btn_group">
					<view class="new_button" @click="newMark">
						不限标签
					</view>
					<view class="my_button" @click="confirmMark">
						确认
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import pageMixinNorRequest from '@/utils/pageMixinNorRequest.js' //在需要引入的组件中引入
	import {
		getMarkLst
	} from '@/api/index.js'
	export default {
		mixins: [pageMixinNorRequest],
		data() {
			return {
				markChoose: [],
				markArrow: 'arrow-down',
				x: require('@/static/icon/x.png'),
			}
		},
		computed: {
			cultString(val) {
				return (val) => {
					if (!val) return ''
					const word = val.toString()
					if (word.length > 5) {
						return word.slice(0, 5) + '...'
					} else {
						return word
					}
				}
			}
		},
		mounted() {
			this.$on('startRequest',this.reRequest)
		},
		beforeDestroy() {
			this.$off('startRequest',this.reRequest)
		},
		methods: {
			scrolltolower(){
				this.getTeam()
				//console.log(1231);
			},
			reRequest(){
				this.getTeam()
			},
			async getMyList(obj) {
				const arr = this.$store.state.doc.filterChosee
				let res = await getMarkLst({
					'groupType': 0,
					...obj
				}) //全部：0，医院标签：1，科室标签：2
				// console.log(res);
				//  console.log(this.$store.state.doc.filterChosee);
				res.rows.map(v => {
					v.tagList.forEach(val => {
						val.check = false
						if(arr?.length > 0){
							arr.forEach(ress=>{
								if(ress.tagId == val.tagId){
									val.check = true
								}
							})
						}
					})
				})
				
				return res
			},
			closeMark() { //标签弹层X
				this.markChoose = this.list.reduce((pre, value, index) => {
					const checkList = value.tagList.filter((v, k) => v.check == true)
					pre.push(...checkList)
					return pre
				}, [])
				
				this.$store.commit('FilterChoose',this.markChoose)
				   //console.log(this.$store.state.doc.filterChosee);
				//console.log(this.markChoose);
				 this.$emit('Markconfirm',{'markChoose':this.markChoose,'list':this.list})
				//this.showMark = false
			},
			selectMarked(k, key) { //标签选中效果
				this.list[k].tagList[key].check = !this.list[k].tagList[key].check
			},
			delMark(value, key) { //删除标签
				this.list.map(v => {
					return v.tagList.map(val => {
						if (val == value) {
							val.check = false
						}
						return val
					})
				})
				this.markChoose.splice(key, 1)
			},
			confirmMark() { //标签弹层确认按钮
				this.markChoose = this.list.reduce((pre, value, index) => {
					const checkList = value.tagList.filter((v, k) => v.check == true)
					pre.push(...checkList)
					return pre
				}, [])
				this.$store.commit('FilterChoose',this.markChoose)
				// this.$emit('Markconfirm',{'markChoose':this.markChoose,'list':this.list})
				 this.$emit('Markconfirm',{'markChoose':this.markChoose,'list':this.list})
				//this.showMark = false
			},
			newMark() { //标签弹层不限标签按钮
				this.list = this.list.map(v=>{
					v.tagList.map(val=>{
						val.check = false
						return val
					})
					return v
				})
				this.$emit('filtercloseMark',this.list)
				// uni.navigateTo({
				// 	url: '/pages/intel/markGroup'
				// })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.top_box {
		position: relative;
		padding-top: 40rpx;

		//background-color: white;
		.top_title {
			position: absolute;
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 38rpx;
			text-align: center;
			z-index: 2;
		}

		.x {
			position: absolute;
			right: 40rpx;
			z-index: 2;
		}
	}

	.mark_zoom {
		//padding: 0 24rpx 0 24rpx;

		.mark_zoom_box {
			display: flex;
			flex-direction: column;
			margin-bottom: 60rpx;

			.mark_zoom_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
				line-height: 38rpx;
				margin-bottom: 20rpx;
				padding-left: 24rpx;
			}

			.mark_zoom_item {
				display: flex;
				flex-wrap: wrap;
				//justify-content: space-between;
				//align-content: center;
				padding-left: 24rpx;

				.disease {
					width: 220rpx;
					height: 80rpx;
					text-align: center;
					background: #F2F2F2;
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 75rpx;
					//padding: 20rpx 80rpx;
					margin-bottom: 20rpx;
					margin-right: 22rpx;
				}
			}

			.checked {
				color: #4DC0D9 !important;
				background-color: #E2FAFF !important;
				border: 2rpx solid #4DC0D9;
			}
		}
	}

	.sticky {
		width: 100%;
		padding: 20rpx 24rpx 30rpx 24rpx;
		position: fixed;
		z-index: 1500;
		bottom: 0;
		padding-bottom: 80rpx;
		background-color: #FFFFFF;
	
		.btn_group {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.my_button {
				flex-shrink: 0;
				background-color: #4DC0D9;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 138rpx;
				border-radius: 20rpx;
			}
	
			.new_button {
				flex-shrink: 0;
				background-color: #E2FAFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #4DC0D9;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 90rpx;
				border-radius: 20rpx;
			}
		}
	}

	.inactive {
		background-color: #A6DFEC !important;
	}

	.selected {
		background-color: #EFFFF8;
	}
</style>